﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>三维地理信息服务平台</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <link rel="stylesheet" href="layui/css/modules/layer/default/layer.css">
    <link rel="stylesheet" href="CSS/index.css">
    <style>
        body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .layui-layout {
            box-shadow: 0 1px 4px 0 #e5e5e5;
            background: #2a2c40;
        }

        .layui-nav {
            background: #2a2c40;
        }

        .message {
            min-width: 400px;
            float: right;
            height: 60px;
            line-height: 60px;
            margin-right: 250px;
        }

        .nav-num {
            display: inline-block;
            width: 35px;
            height: 35px;
            background: red;
            border-radius: 100%;
            line-height: 35px;
            text-align: center;
            margin-right: 20px;
        }

        .layui-layout-left {
            left: 10px;
            min-width: 580px;
        }

        .layui-layout-logo {
            min-width: 500px;
            float: left;
            margin-left: 580px;
        }

        .layui-layout-logo h3 {
            font-size: 22px;
            display: inline;
        }

        .layui-layout-right .layui-nav-item {
            line-height: 59px;
            margin-right: 25px;
            font-weight: bold;
            cursor: pointer;
        }

        .logo-title {
            display: inline-block;
        }

        .nav-date {
            margin-right: 10px;
        }
        .load-container {
            width: 100%;
            height: 100%;
            position: absolute;
            bottom: 0;
            left: 0;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            background-color: black;
            z-index: 99999;
        }

        .loading {
            position: relative;
            width: 110px;
            height: 110px;
            margin: auto;
            top: 50%;
            left: 50%;
            margin-top: -55px;
            margin-left: -55px;
        }
    </style>

</head>

<body>
    <div class="layui-layout">
        <div class="layui-header">
            <ul class="layui-nav layui-layout-left">
                <li class="layui-nav-item nav-date">
                    <div>
                        <span>-</span>年
                        <span>-</span>月
                        <span>-</span>日
                        <span>-</span>时
                        <span>-</span>分
                        <span>-</span>秒
                    </div>
                </li>
                <li class="layui-nav-item nav-weater">
                    <span> ---</span>
                    <span> ---</span>
                    <span> ---</span>
                </li>
            </ul>
            <ul class="layui-nav layui-layout-logo">
                <i class="layui-icon" style="font-size: 55px">&#xe62e;</i>
                <div class="logo-title">
                    <h3>事故预防及应急管理智能化平台</h3>
                    <p>沧州临港经济技术开发区</p>
                </div>
            </ul>
            <form class="layui-form" action="" style="position: absolute;left: 56%;top: 10px;z-index: 99;">
                <div class="layui-form-item">
                    <div class="layui-nav switch23">
                        <input type="checkbox" name="open" lay-skin="switch" lay-filter="switch23" lay-text="2D|3D">
                    </div>
                </div>

            </form>

            <ul class="layui-nav  message">
                <span class="nav-num">12</span>
                <span class="nav-status">(高) </span>
                <span class="nav-desc">
                    临港化工 | 3#液氨储罐 | 液氨 | 压力| 已持续00:05:21
                </span>
            </ul>
            <ul class="layui-nav  layui-layout-right">
                <li class="layui-nav-item">
                    <i class="layui-icon">&#xe65f;</i>
                </li>
                <li class="layui-nav-item">
                    <i class="layui-icon">&#xe66a;</i>
                </li>
                <li class="layui-nav-item">
                    <i class="layui-icon">&#xe652;</i>
                </li>
                <li class="layui-nav-item">
                    <i class="layui-icon">&#xe66f;</i>
                </li>
            </ul>
        </div>
    </div>
    <!--三维球-->
    <iframe id="mapContainer" src="./three.html" style="height: 100%;width: 100%;border: unset;"></iframe>
    <div class="load-container load4">
        <!-- <div class="loader">Loading...</div> -->
        <img class='loading' src="static/IMG/loading.gif">
    </div>
    </div>
    <script src="node_modules/jquery-2.0.3.js"></script>
    <script src="layui/layui.js" charset="utf-8"></script>
    <script>
        layui.use(['element', 'form'], function () {
            let form = layui.form;
            form.on('switch(switch23)', function (data) {
                $('.load-container').show();
                let iframe = $('#mapContainer')[0];
                if (this.checked) {
                    iframe.src = iframe.src.replace('three', '/2D/index');
                }else{
                    iframe.src = iframe.src.replace('/2D/index', 'three');
                }
            });
        })
        //cesiumContainer高度适应
        $('#mapContainer').height($(window).height() - 60);
        $('.load-container').height($(window).height() - 60);

        //窗口改变事件
        $(window).resize(function () {
            $('#mapContainer').height($(window).height() - 60);
            $('.load-container').height($(window).height() - 60);
        })

        //获取当前时间
        time();
        setInterval(time, 1000);
        //获取天气
        $.ajax({
            'url': 'http://restapi.amap.com/v3/weather/weatherInfo?key=cbdd07659337f75071f4a25d0d0cb2a5&city=沧州',
            'type': 'GET',
            success: function (data) {
                if (data.lives.length > 0) {
                    data = data.lives[0];
                    $('.nav-weater span').eq(0).text(data.weather + ' ' + data.temperature + '°C | ');
                    $('.nav-weater span').eq(1).text('风向：' + data.winddirection + '， 风力：' + data.windpower + ' | ');
                    $('.nav-weater span').eq(2).text('湿度：' + data.humidity);
                }
            }
        });
        function time() {
            var date = new Date();
            var n = date.getFullYear();
            var y = date.getMonth() + 1;
            var t = date.getDate();
            var h = date.getHours();
            var m = date.getMinutes();
            var s = date.getSeconds();

            $('.nav-date span').eq(0).html(n);
            $('.nav-date span').eq(1).html(y);
            $('.nav-date span').eq(2).html(t);
            $('.nav-date span').eq(3).html(h);
            $('.nav-date span').eq(4).html(m);
            $('.nav-date span').eq(5).html(s);
            // for (var i = 0; i < $('div').length; i++) {
            //     if ($('div').eq(i).text().length == 1) {
            //         $('div').eq(i).html(function(index, html) {
            //             return 0 + html;
            //         });
            //     }
            // }
        }
    </script>
</body>

</html>